<template>
 
  <el-row class="myheader">
    <el-col :span="21">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item style="color:white" v-for="(i, index) in indexPath" :key="index">{{i}}</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
    <el-col :span="3">
      <el-dropdown class="login-user" >
        <el-tag style="font-size:16px;padding:10px 20px;border-radius:40px;display: inline;cursor: pointer;">{{loginUser}}</el-tag>
        <el-dropdown-menu slot="dropdown">
          <router-link to="/index/runInfo">
            <el-dropdown-item>首页</el-dropdown-item>
          </router-link>
          <el-dropdown-item>
            <span @click="about">关于</span>
          </el-dropdown-item>
          <el-dropdown-item>
            <span @click="changePwd">修改密码</span>
          </el-dropdown-item>
          <el-dropdown-item divided>
            <span @click="logout">退出</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-col>
    <el-dialog :title="dialogTitle" :visible.sync="changePwdDialog" :width="'422px'">
      <el-form :model="form">
        <el-form-item label="用户名称" :label-width="labelWidth">
          <el-input v-model="form.nickName " auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="新密码" :label-width="labelWidth">
           <el-input type="password" v-model="form.loginPassword " auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" :label-width="labelWidth">
           <el-input type="password" v-model="form.loginPasswordConfirm " auto-complete="off" @keyup.enter.native="saveChangePwd()"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="changePwdDialog = false">取 消</el-button>
        <el-button type="primary" @click="saveChangePwd">确 定</el-button>
      </div>
    </el-dialog>
  </el-row>
</template>

<script>
import { getNickName, removeToken, getManagerId } from "../../util/auth";
import { updateManagerApi } from "../../api/manager.js";
import { logout } from "../../api/logout.js";

export default {
  name: "myHeader",
  data: function() {
    return {
      labelWidth: "100px",
      managers: [],
      dialogTitle: "",
      form: {},
      changePwdDialog: false
    };
  },
  computed: {
    loginUser() {
      return getNickName();
    },
    indexPath() {
      return this.$store.state.header.indexPath;
    }
  },
  methods: {
    logout() {
      const self = this;
      logout()
        .then(function(resp) {
          if (resp.errmsg === "ok") {
            removeToken();
            self.$router.push({ path: "/login" });
          }
        })
        .catch(function(e) {
          console.log(e);
        });
    },
    about() {
      var version = "1.0";
      this.$alert(`版本 ${version}`, "关于一步充电管理系统", {
        confirmButtonText: "确定"
      });
    },
    changePwd() {
      let _this = this;
      _this.dialogTitle = "修改密码";
      _this.form.id = getManagerId();
      _this.form.nickName = getNickName();
      _this.changePwdDialog = true;
    },
    saveChangePwd() {
      let _this = this;
      if(_this.form.loginPassword!==_this.form.loginPasswordConfirm){
        this.$message({
          message: "两次密码输入不一致！",
          type: "warning"
        });
        return;
      }
      updateManagerApi(_this.form).then(resp => {
        _this.changePwdDialog = false;
        if (resp.errmsg === "ok") {
          _this.$notify({
             title: "成功",
            message: "密码修改成功",
             type: "success"
          });
          _this.logout()
        } else {
           _this.$notify({
            title: "失败",
            message: "密码修改失败",
            type: "error"
           });
        }
      });
    }
  }
};
</script>

<style scoped>

.el-breadcrumb__inner{
  color:#ffffff;
}


.myheader {
  height: 100%;
  display: flex;
  align-items: center;

}
</style>
